<template>
  <div>
    <ul>
      <li class="item">
        <div class="label">公司名称</div>
        <div class="text ">{{ formInfo.company_name }}</div>
      </li>
      <li class="item">
        <div class="label">公司介绍</div>
        <div class="text ">
          {{ formInfo.company_intro }}
        </div>
      </li>
      <li class="item">
        <div class="label">营业执照</div>
        <div class="text">
          <a
            :href="$api.imgUserUrl + formInfo.business_license"
            download="营业执照"
            class="text-green"
            >下载营业执照</a
          >
        </div>
      </li>
      <li class="item">
        <div class="label">统一社会信用号码</div>
        <div class="text ">{{ formInfo.unicredit }}</div>
      </li>
      <li class="item">
        <div class="label">法人姓名</div>
        <div class="text ">{{ formInfo.legal_person }}</div>
      </li>
      <li class="item">
        <div class="label">法人身份证照片</div>
        <div class="text">
          <a
            :href="$api.imgUserUrl + formInfo.legal_person_id_front"
            download="身份证正面"
            class="text-green"
            >下载身份证正面</a
          >&nbsp;&nbsp;&nbsp;&nbsp;<a
            :href="$api.imgUserUrl + formInfo.legal_person_id_back"
            download="身份证反面"
            class="text-green"
            >下载身份证反面</a
          >
        </div>
      </li>
      <li class="item">
        <div class="label">法人身份证号</div>
        <div class="text ">
          {{ formatIdCard(formInfo.legal_person_id_card) }}
        </div>
      </li>
      <li class="item">
        <div class="label">法人手机号</div>
        <div class="text ">{{ formatTel(formInfo.mobile) }}</div>
      </li>
      <li class="item">
        <div class="label">基本账号</div>
        <div class="text ">{{ formatCard(formInfo.base_count) }}</div>
      </li>
      <li class="item">
        <div class="label">基本户开户行</div>
        <div class="text ">{{ formInfo.base_bank_name }}</div>
      </li>
      <li class="item" v-if="formInfo.bankName">
        <div class="label">开户行支行名称</div>
        <div class="text ">{{ formInfo.bankName }}</div>
      </li>
      <li class="item" v-if="formInfo.unionBank">
        <div class="label">开户行支付行号</div>
        <div class="text ">{{ formInfo.unionBank }}</div>
      </li>
      <li class="item" v-if="formInfo.province">
        <div class="label">开户行省份</div>
        <div class="text ">{{ formInfo.province }}</div>
      </li>
      <li class="item" v-if="formInfo.city">
        <div class="label">开户行城市</div>
        <div class="text ">{{ formInfo.city }}</div>
      </li>
      <li class="item">
        <div class="label">对公账户许可证</div>
        <div class="text">
          <a
            :href="$api.imgUserUrl + formInfo.company_count"
            class="text-green"
            download="对公账户许可证"
            >下载对公账户许可证</a
          >
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "disabledForm",
  props: {
    formData: {
      type: Object
    }
  },
  data() {
    return {
      formInfo: {
        bankName: "",
        unionBank: "",
        province: "",
        city: "",
        unicredit: "",
        company_name: "",
        company_intro: "",
        mobile: "",
        base_bank_name: "",
        base_count: "",
        legal_person: "",
        legal_person_id_card: "",
        business_license: "",
        legal_person_id_front: "",
        legal_person_id_back: "",
        company_count: ""
      }
    };
  },
  methods: {
    formatTel(tel) {
      return tel.substr(0, 3) + "****" + tel.substr(-4, 4);
    },
    formatIdCard(card) {
      return card.substr(0, 4) + "**********" + card.substr(-4, 4);
    },
    formatCard(card) {
      return card.substr(0, 4) + "**********" + card.substr(-4, 4);
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.formInfo = val;
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped lang="less">
.item {
  line-height: 3.5rem;
  margin-bottom: 10px;
  font-size: 16px;
  .flex_content();
  .label {
    color: rgba(119, 119, 119, 1);
    width: 138px;
    text-align: right;
    margin-right: 0.5rem;
    &:after {
      content: ":";
      margin-right: 1rem;
    }
  }
  .text {
    .flex_one();
    padding: 0 5px;
    color: rgba(68, 68, 68, 1);
  }
}
</style>
